import React, { useState } from 'react';
import { Menu, Button, Layout, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import './Hua.css'
import SelectedTemplateContent from '../SelectedTemplateContent/SelectedTemplateContent';
import { StarOutlined, PictureOutlined, BookOutlined, WechatOutlined, FilePdfOutlined, ShoppingOutlined, PrinterOutlined, VideoCameraOutlined, UserOutlined, SmileOutlined } from '@ant-design/icons';
const { Header, Content } = Layout;

interface MenuItemType {
    label: string;
    key: string;
    icon?: React.ReactNode;
}
const menuItems: MenuItemType[] = [
    {
        label: '精选模板',
        key: 'selectedTemplate',
        icon: <StarOutlined />,
    },
    {
        label: '海报',
        key: 'poster',
        icon: <PictureOutlined />,
    },
    {
        label: '小红书',
        key: 'xiaohongshu',
        icon: <BookOutlined />,
    },
    {
        label: '公众号',
        key: 'publicAccount',
        icon: <WechatOutlined />,
    },
    {
        label: 'PPT',
        key: 'ppt',
        icon: <FilePdfOutlined />,
    },
    {
        label: '电商',
        key: 'ecommerce',
        icon: <ShoppingOutlined />,
    },
    {
        label: '印刷物料',
        key: 'printingMaterials',
        icon: <PrinterOutlined />,
    },
    // {
    //     label: 'H5',
    //     key: 'h5',
    //     icon: <H5Outlined />,
    // },
    {
        label: '人事行政',
        key: 'hrAdmin',
        icon: <UserOutlined />,
    },
    {
        label: '社交生活',
        key: 'socialLife',
        icon: <SmileOutlined />,
    },
    {
        label: '视频模板',
        key: 'videoTemplate',
        icon: <VideoCameraOutlined />,
    },
    // {
    //     label: '字体库',
    //     key: 'fontLibrary',
    //     icon: <FontOutlined />,
    // },
    {
        label: '插画元素',
        key: 'illustrationElements',
        icon: <PictureOutlined />,
    },
    {
        label: '图片库',
        key: 'imageLibrary',
        icon: <PictureOutlined />,
    },
    // {
    //     label: '企业设计',
    //     key: 'enterpriseDesign',
    //     icon: <BuildOutlined />,
    // },
    // {
    //     label: '视频特效',
    //     key: 'videoEffects',
    //     icon: <FireOutlined />,
    // },
];




const renderMenuItems = () => {
    return menuItems.map((item) => (
        <Menu.Item key={item.key} icon={item.icon}>
            <Button type="text">{item.label}</Button>
        </Menu.Item>
    ));
};

const Hua = () => {
    const [selectedTemplateVisible, setSelectedTemplateVisible] = useState(false);

    const handleMouseEnter = () => {
        setSelectedTemplateVisible(true);
    };

    const handleMouseLeave = () => {
        setSelectedTemplateVisible(false);
    };
    return (
        <div>
            <Layout>
                <Header className="header">
                    <Menu mode="horizontal" theme="light">
                        <Dropdown
                            overlay={
                                <Menu onClick={() => setSelectedTemplateVisible(false)}>
                                    {renderMenuItems()}
                                </Menu>
                            }
                            trigger={['click']}
                            placement="bottomLeft"
                            onMouseEnter={handleMouseEnter}
                            onMouseLeave={handleMouseLeave}
                        >
                            <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
                                <Button type="text">
                                    <Space>
                                        <StarOutlined />
                                        精选模板
                                    </Space>
                                </Button>
                                <DownOutlined />
                            </a>
                        </Dropdown>
                        {renderMenuItems().slice(1)}
                    </Menu>
                </Header>
                <Content className="content">
                    {selectedTemplateVisible && <SelectedTemplateContent />}
                    <div className="common-scenes">
                    </div>
                </Content>
            </Layout>

        </div>
    )
}

export default Hua